<template>
	<view>
		<view class="exerc-card module-back">
			<!-- 题目标题 -->
			<view class="card-title su-border2">
				<view class="title-left">
					<text class="exerc-type">{{ topicType }}</text>
					<text class="exerc-score">({{ itemData.score }}分)</text>
				</view>
				<view class="title-right">
					<text class="crt-text">{{ itemIndex + 1 }}</text>
					<text class="all-text">/{{ exercConfig.exercCount }}</text>
				</view>
			</view>
			<!-- 题目内容 -->
			<view class="card-content">
				<view class="exerc-topic">
					<!-- <text>{{ itemIndex + 1 }}、</text> -->
					<text>{{ itemData.topic || '-' }}</text>
				</view>
				<!-- 题目选择项 -->
				<view class="exerc-options" v-if="itemData.type != 'input'">
					<view class="op-item wkfont" :key="index" :class="[isSelect(item) ? 'select' : '']"
						v-for="(item, index) in itemData.optionItems" @click="selectTopic(item, itemIndex)">
						<text class="op-key">{{ item.value }}</text>
						<text class="op-label">{{ item.label }}</text>
					</view>
					<button class="su-button-white" style="margin-top: 40upx;" 
						@click="submitSelect(itemData, itemIndex)">确认选择</button>
				</view>
				<view class="exerc-options" v-else>
					<u-input v-model="itemData.text" :trim="true" @blur="submitSelect(itemData, itemIndex,'input')" type="text" :border="true" />
					<button class="su-button-white" style="margin-top: 40upx;"
						@click="submitSelect(itemData, itemIndex)">填写完成</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
/**
 * 习题练习页面
 */
export default {
	components: {},
	props: {
		itemData: {
			type: Object,
			default() {
				return {}
			}
		},
		itemIndex: {
			type: Number,
			default: 0
		},
		exercConfig: {
			type: Object,
			default() {
				return {}
			}
		}
	},
	data() {
		return {
			selectData: []
		}
	},
	computed: {
		topicType() {
			const { type } = this.itemData
			let typeName = ''
			switch (type) {
				case 'radio':
					typeName = '单选'
					break
				case 'multiple':
					typeName = '多选'
					break
				case 'jude':
					typeName = '判断'
					break
				case 'input':
					typeName = '填空'
					break
			}
			return typeName
		},
	},
	methods: {
		isSelect(item) {
			const { select, type } = this.itemData
			if (select && (type === 'radio' || type === 'jude')) {
				return select === item.value
			} else if (select && type === 'multiple') {
				let tmpSelect = select.split(',')
				return tmpSelect.includes(item.value)
			} else {
				return false
			}
		},
		// 选择题目
		selectTopic(item, index) {
			console.log(item)
			const { type, select, selectId } = this.itemData
			if ('radio' === type || 'jude' === type) {
				if (select !== item.value) {
					// this.$emit('select', { type, index, item })
				}
				this.itemData.select = item.value
				this.itemData.selectId = item.optionId
			} else if ('multiple' === type) {
				let tmpSelect = []
				if (select) {
					tmpSelect = select.split(',')
				}
				let tmpIndex = tmpSelect.indexOf(item.value)
				if (tmpIndex > -1) {
					tmpSelect.splice(tmpIndex, 1)
				} else {
					tmpSelect.push(item.value)
				}
				tmpSelect = tmpSelect.sort()
				tmpSelect = tmpSelect.filter(v => {return v})
				this.itemData.select = tmpSelect.join(',')

				let tmpSelect2 = []
				if (selectId) {
					tmpSelect2 = selectId.split(',')
				}
				let tmpIndex2 = tmpSelect2.indexOf(typeof item.optionId === 'string'?item.optionId:JSON.stringify(item.optionId))
				if (tmpIndex2 > -1) {
					tmpSelect2.splice(tmpIndex2, 1)
				} else {
					tmpSelect2.push(item.optionId)
				}
				tmpSelect2 = tmpSelect2.sort()
				tmpSelect2 = tmpSelect2.filter(v => {return v})

				console.log('tmpSelect',tmpSelect,tmpSelect2)

				this.itemData.selectId = tmpSelect2.join(',')
			}
		},
		submitSelect(item, index,type) {
			if(type == 'input'){
				this.itemData.input = item.text
				return
			}
			this.$emit('select', { item, index })
		}
	}
}
</script>

<style lang="scss" scoped>
@import "./exerc-card.scss";
</style>